<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="never">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>My Music FM</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1092136_8z061cubb36.css">
  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
  <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
  <section id="page-music">
    <main class="layout">
      <div class="aside">
        <figure></figure>
        <div class="actions">
          <span class="btn-collect iconfont icon-xihuan"></span>
          <span class="btn-play iconfont icon-bofang"></span>
          <span class="btn-next iconfont icon-xiayishou"></span>
        </div>
      </div>
      <div class="detail">
        <span class="tag">小皮电台</span>
        <h1>We Will Success</h1>
        <ul class="icons">
          <li><span class="iconfont icon-shouting"></span>666</li>
          <li><span class="iconfont icon-xihuan"></span>66</li>
          <li><span class="iconfont icon-dianzan"> </span>6</li>
        </ul>
        <div class="area-bar">
          <div class="bar">
            <div class="bar-progress"></div>
          </div>
          <div class="current-time">0:00</div>
        </div>
        <div class="author">薛小皮</div>
        <div class="lyric">
          <p></p>
        </div>
      </div>
    </main>
    <footer>
      <div class="layout">
        <span class="iconfont icon-zuo"></span>
        <span class="iconfont icon-you"></span>
        <div class="box">
           <ul>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>渐</h3>
             </li>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>行</h3>
             </li>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>渐</h3>
             </li>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>远</h3>
             </li>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>的</h3>
             </li>
             <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>我</h3>
             </li>
              <li>
              <div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_spring.jpg-small)"></div>
               <h3>们</h3>
             </li>
           </ul> 
        </div>        
      </div>

    </footer>
  </section>
  <section id="page-cover"></section>
  <div class="bg"></div>
  <script src="js/index.js"></script>
</body>
</html>